<template>
    <div class="home-title whov" :class="topNumber > 0 ? 'title-theme' : ''">
        <div class="home-main whov">
            <div class="title-head"> 图表 </div>
            <div class="title-content">
                <div v-for="(item, index) in dataList" :key="index" class="title-service cup">{{ item.label }}</div>
            </div>
            <div class="title-base-info">咨询电话：400-123-8909</div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref, defineProps, computed, PropType } from 'vue'
    const props = defineProps({
        scrollTop: {
            type: Number as PropType<number>,
            require: true,
            default: () => 0
        }
    })
    const topNumber = computed(() => props.scrollTop)
    const dataList = ref<{ label: string; value: string }[]>([
        { label: '产品中心', value: '' },
        { label: '应用领域', value: '' },
        { label: '解决方案', value: '' },
        { label: '服务中心', value: '' },
        { label: '新闻中心', value: '' }
    ])
</script>
<style scoped lang="less">
    .home-title.title-theme {
        background-color: rgba(0, 0, 0, 0.85);
    }
    .home-title {
        position: fixed;
        top: 0;
        left: 0;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99;
        box-sizing: border-box;
        width: 100%;
        background-color: transparent;
        overflow: hidden;

        .home-main {
            display: flex;
            transition: background-color 0.5s ease;
            background: transparent;
            display: flex;
            justify-content: space-between;
            max-width: 1440px;
            height: 65px;
            line-height: 65px;
            font-weight: 600;
            color: #fff;
            font-size: 14px;
            .title-head {
                width: 200px;
            }
            .title-content {
                flex: 1;
                display: flex;
                justify-content: space-between;
                .title-service {
                    display: inline-block;
                    margin: 0 20px;
                }
                .title-service:hover {
                    color: @theme-color;
                }
            }
            .title-base-info {
                width: 200px;
                text-align: right;
            }
        }
    }
</style>
